<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PlayCanvas UI Example</title>
        <script src="../../build/output/playcanvas-latest.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <canvas id="application-canvas"></canvas>


        <script>
            var canvas = document.getElementById('application-canvas');
            var app = new pc.Application(canvas, {
                mouse: new pc.Mouse(document.body),
                touch: new pc.TouchDevice(document.body)
            });
            app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
            app.setCanvasResolution(pc.RESOLUTION_AUTO);

            // use device pixel ratio
            app.graphicsDevice.maxPixelRatio = window.devicePixelRatio;

            app.start();

            // create camera
            var c = new pc.Entity("Camera");
            c.addComponent('camera', {
                clearColor: new pc.Color(44/255, 62/255, 80/255),
                farClip: 10000
            });
            c.translate(1,1,1);
            c.lookAt(0,0,0);
            app.root.addChild(c);

            // Load Assets
            var assets = [
                new pc.Asset('Arial.json', "font", {url: "../assets/arial/Arial.json"})
            ]

            var count =0;
            app.assets.on('load', function () {
                count++;
                if (count === assets.length) {
                    onLoadComplete();
                }
            });

            for (var i = 0; i < assets.length; i++) {
                app.assets.add(assets[i]);
                app.assets.load(assets[i]);
            }

            var fontAsset = assets[0];

            var menu;

            // create the menu screen, panel and list items
            function createMenu() {
                menu = new pc.Entity();
                menu.name = "Menu"+c;
                menu.addComponent("screen", {resolution: new pc.Vec2(640,480), screenSpace: true});
                menu.screen.scaleMode = "blend";
                menu.screen.referenceResolution = new pc.Vec2(1280,720);

                container = new pc.Entity();
                container.name = "Container";
                container.addComponent("element", {
                    type: "image",
                    anchor: new pc.Vec4(0.5, 0.5, 0.5, 0.5),
                    pivot: new pc.Vec2(0.5, 0.5),
                    width: 900,
                    height: 400,
                    opacity: 1,
                    color: new pc.Color(0.1, 0.7, 1.0),
                    mask: true
                });

                app.root.addChild(menu);
                menu.addChild(container)

                return container;

            };

            var c = 0;
            function createPanel(menu) {
                c++;
                var panel, mask, subpanel, submask, block, hiddenblock;

                // create a panel
                panel = new pc.Entity();
                panel.name = "Panel"+c;
                panel.addComponent("element", {
                    type: "image",
                    anchor: new pc.Vec4(0.5, 0.5, 0.5, 0.5),
                    pivot: new pc.Vec2(0.5, 0.5),
                    width: 300,
                    height: 300,
                    opacity: 1,
                    color: new pc.Color(1,1,1,1)
                });

                // create a mask
                mask = new pc.Entity();
                mask.name = "Mask"+c;
                mask.addComponent("element", {
                    type: "image",
                    anchor: new pc.Vec4(0, 0, 1, 1),
                    pivot: new pc.Vec2(0.5, 0.5),
                    margin: new pc.Vec4(0,0,0,0),
                    color: new pc.Color(1,0.5,0.5),
                    opacity: 1,
                    mask: true
                });

                // create a panel
                subpanel = new pc.Entity();
                subpanel.name = "Subpanel"+c;
                subpanel.addComponent("element", {
                    type: "image",
                    anchor: new pc.Vec4(0.5, 0.1, 0.5, 0.1),
                    pivot: new pc.Vec2(0.5, 0),
                    width: 400,
                    height: 100,
                    opacity: 1,
                    color: new pc.Color(0.5,0.5,0.5)
                });

                submask = new pc.Entity();
                submask.name = "Submask"+c;
                submask.addComponent("element", {
                    type: "image",
                    anchor: new pc.Vec4(0.5,0,0.5,0),
                    pivot: new pc.Vec2(0.5, 0),
                    width: 400,
                    height: 100,
                    opacity: 1,
                    mask: true
                });

                block = new pc.Entity();
                block.name = "Block"+c;
                block.addComponent("element", {
                    type: "image",
                    anchor: new pc.Vec4(1,0.5,1,0.5),
                    pivot: new pc.Vec2(0.5, 0.5),
                    width: 150,
                    height: 100,
                    opacity: 1,
                    color: new pc.Color(0,1,0)
                });
                block.setLocalPosition(0,50,0);


                hiddenblock = new pc.Entity();
                hiddenblock.name = "HiddenBlock"+c;
                hiddenblock.addComponent("element", {
                    type: "image",
                    anchor: new pc.Vec4(0.5, 1, 0.5, 1),
                    pivot: new pc.Vec2(0.5, 1),
                    width: 100,
                    height: 300,
                    opacity: 1,
                    color: new pc.Color(1,0,0)
                });

                text = new pc.Entity();
                text.name = "Text"+c;
                text.addComponent("element", {
                    type: "text",
                    anchor: new pc.Vec4(0.5, 0.8, 0.5, 0.8),
                    pivot: new pc.Vec2(0.5, 1),
                    fontSize: 64,
                    fontAsset: fontAsset,
                    opacity: 1,
                    color: new pc.Color(0,0,1),
                    text: "Hello World!"
                });

                panel.addChild(mask);
                mask.addChild(block);
                mask.addChild(subpanel);
                subpanel.addChild(submask);
                submask.addChild(hiddenblock);
                hiddenblock.addChild(text);

                menu.addChild(panel);

                return panel;
            };


            var p1,p2,p3;

            // called when all assets are loaded
            function onLoadComplete() {
                // use nearest filtering on pixelized textures to prevent leaks
                for (var i = 0; i < assets.length; i++) {
                    if (assets[i].type === "texture") {
                        assets[i].resource.minFilter = pc.FILTER_NEAREST;
                        assets[i].resource.magFilter = pc.FILTER_NEAREST;
                    }
                }

                // create the entities
                var parent = createMenu();
                p1 = createPanel(parent);
                p1.translateLocal(-300,-25,0);

                p2 = createPanel(parent);
                p2.translateLocal(0,25,0);

                p3 = createPanel(parent);
                p3.translateLocal(300,-25,0);

                // var panel1 = app.root.findByName("Panel1");
            }

            var a =0;
            // update every frame
            app.on("update", function (dt) {
                // a += dt;
                // p2.setLocalPosition(300*Math.sin(a), 0, 0);
            });

            // hook up window resize events
            window.addEventListener("resize", function () {
                app.resizeCanvas(canvas.width, canvas.height);
            });
        </script>
    </body>
</html>
